<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS,CSS重定义-拼图Pintuer</title>
	<link href="pintuer/pintuer.css" rel="stylesheet">
	<script src="jquery.js"></script>
	<script src="pintuer/pintuer.js"></script>
	<script src="layer/layer.js"></script>
</head>
<body>

<div class="container">

	<blockquote>
		<table class="table table-bordered table-hover">
			<thead>
			<tr class="yellow">
				<td>111</td>
				<td>222</td>
				<td>333</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>444</td>
				<td>555</td>
				<td>666</td>
			</tr>
			<tr>
				<td>444</td>
				<td>555</td>
				<td>666</td>
			</tr>
			</tbody>
		</table>
	</blockquote>

	<blockquote>
		<strong>UI界面pintuer
			<a href="http://public.139sl.cn/pintuer/index.html">http://public.139sl.cn/pintuer/index.html</a></strong>


		<p>
			<button class="button">默认</button>
			<button class="button border-main">主色</button>
			<button class="button border-red">危险</button>
			<button class="button border-yellow">警告</button>
			<button class="button border-blue">主要</button>
			<button class="button border-green">成功</button>
		</p>
		<p>
			<button class="button">默认</button>
			<button class="button bg-main">主色</button>
			<button class="button bg-red">危险</button>
			<button class="button bg-yellow">警告</button>
			<button class="button bg-blue">主要</button>
			<button class="button bg-green">成功</button>
		</p>

	</blockquote>

	<hr>

	<blockquote>
		<strong>
			弹窗layer
			<a href="http://layui.139sl.cn/demo_139sl/layer.html">更多实例：http://layui.139sl.cn/demo_139sl/layer.html</a>


		</strong>
		<p>
			<button class="button border-main" id="alert">alert提示</button>
			<button class="button border-main" id="msg">msg提示</button>
			<button class="button border-main" id="msg1">msg提示 图标1</button>
			<button class="button border-main" id="msg2">msg提示 图标2</button>
			<button class="button border-main" id="msg3">msg提示 图标3</button>
			<button class="button border-main" id="msg4">msg提示 图标4</button>
			<button class="button border-main" id="msg5">msg提示 图标5</button>
			<button class="button border-main" id="msg6">msg提示 图标6</button>
			<button class="button border-main" id="msg7">msg提示 图标7</button>
		</p>
		<p>
			<button class="button border-main" id="confirm">询问框</button>
		</p>
	</blockquote>



</div>


<script>
    $('#alert').on('click',function(){
        layer.alert("操作成功");
    });
    $('#msg').on('click',function(){
        layer.msg("操作成功");
    });
    $('#msg1').on('click',function(){
        layer.msg('你确认了信息', {icon: 1});
    });
    $('#msg2').on('click',function(){
        layer.msg('你确认了信息', {icon: 2});
    });
    $('#msg3').on('click',function(){
        layer.msg('你确认了信息', {icon: 3});
    });
    $('#msg4').on('click',function(){
        layer.msg('你确认了信息', {icon: 4});
    });
    $('#msg5').on('click',function(){
        layer.msg('你确认了信息', {icon: 5});
    });
    $('#msg6').on('click',function(){
        layer.msg('你确认了信息', {icon: 6});
    });
    $('#msg7').on('click',function(){
        layer.msg('你确认了信息', {icon: 7});
    });
</script>
<hr>


<script>
    $('#confirm').on('click',function(){
        //询问框
        layer.confirm('是否确认信息？', {
            btn: ['确认','取消'] //按钮
        }, function(){
            layer.msg('你确认了信息', {icon: 1});
        }, function(){});
    });
</script>
</body>
</html>